<template>
    <div>
        <Row style="margin: 5px 5px 0 5px">
            <i-col span="8"  >
                <Button @click="btn_add_version"  style="margin-right: 5px">创建版本</Button>
                <Button @click="btn_refresh">刷新</Button>
            </i-col>
            <!-- 查询区域 -->
            <i-col span="12" >
                <Form ref="select_form" :model="select_item" :rules="select_rules" inline>
                    <Form-Item  prop="project" >
                        <Select v-model="select_item.project" placeholder="选择项目" style="min-width:100px">
                            <Option v-for="project in project_list" :key="project" :value="project">{{ project }}</Option>
                        </Select>
                    </Form-Item>
                    <FormItem>
                        <Button type="primary"  @click="btn_view_version('select_form')">迭代历史</Button>
                    </FormItem>
                </Form> 
            </i-col>
            
        </Row>
        <!-- 列表区域 -->
        <i-table border stripe  :columns="format" :data="show_list" height="720">
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" style="margin-bottom: 5px;margin-right:5px;"  @click="btn_edit_version(index)">编辑</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 创建version模态框 -->
        <Modal v-model="show_add_version_modal" draggable  width="800">
            <p slot="header" style="color:#f60;text-align:center">
                {{version.service}}<span>添加version</span>
            </p>
            <div >
                 <Form ref="version" :model="version" :rules="version_rules" label-position="left"  :label-width="150">
                   <Form-Item label="选择项目" prop="project">
                        <Select v-model="version.project"  @on-change="project_change">
                            <Option v-for="project in project_list" :key="project" :value="project">{{ project }}</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="版本内容:" prop="content">
                        <Input v-model="version.content" type="textarea" :rows="10"  />
                    </Form-Item>
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="submit_add_version('version')">提交</Button>
            </div>
        </Modal>
        <!-- 编辑version模态框 -->
        <Modal v-model="show_edit_version_modal" draggable  width="800">
            <p slot="header" style="color:#f60;text-align:center">
               <span>编辑</span>
            </p>
            <div >
                <Form ref="version_edit" :model="version_edit" :rules="version_rules" label-position="left"  :label-width="150">
                    <Form-Item label="项目(不可变更)" prop="project">
                        <Input v-model="version_edit.project" disabled />
                    </Form-Item> 
                    <Form-Item label="版本内容:" prop="content">
                         <Input v-model="version_edit.content" type="textarea" :rows="10"  />
                    </Form-Item>
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="submit_edit_version('version_edit')">提交</Button>
            </div>
        </Modal>
        <!-- 版本模态框 -->
        <Modal v-model="show_version_modal" draggable  width="800">
            <p slot="header" style="color:#f60;text-align:center">
               <span>版本迭代</span>
            </p>
            <div>
                <Timeline>
                    <TimelineItem  v-for="line in timeline_list" :key="line.time">
                        <p class="time">{{ line.time }}</p>
                        <p class="contnet">{{ line.content }}</p>
                    </TimelineItem>
                </Timeline>
            </div>
        </Modal>
    </div>
</template>

<script>

import { version_add,
        version_list,
        version_update,
        version_select,
        get_project_name_list,
        get_service_by_project} from '@/api';

import { post } from '@/api/http'


export default {
    data() {
        return {
            format: [
                {
                    title: '项目',key: 'project',                    
                },
                {
                    title: '版本内容',key: 'content',tooltip: true,ellipsis: true,
                },
                {
                    title: '创建时间',key: 'create_time'
                },
                {
                    title: '操作',slot: 'action',width: 200,align: 'center'
                }
            ],
            // 
            timeline_list:[
                {
                    "time": "2020-10-5",
                    "content": "flask-flow: 1.5"
                },
                {
                    "time": "2020-10-8",
                    "content": "flask-flow: 1.6"
                },
            ],
            // 新增站点绑定
            version: {
                project: '',
                content: '',
            },
            // 项目列表
            project_list: [],
            version_rules: {
                content:[
                    {required: true,message:"请输入内容",trigger: 'blur'},
                ],
            },
            show_add_version_modal: false,
            // 编辑数据
            version_edit: {
                project: '',
                content: '',
            },
            
            show_edit_version_modal:false,

            // 版本迭代
            show_version_modal: false,
            // 查询            
            select_item: {
              project: '',
            },
            select_rules:{
                project:[
                    { required: true,message:"请先选择项目",trigger: 'change'},
                ],  
            },

            // 列表
            show_list: [],
            // 分页
            total: 0,
            pageSize: 15,
        }
    },
    methods: {
        // 查看版本迭代
        btn_view_version(name){
            let validate = false
            this.$refs[name].validate((valid) => {
                if (valid) validate = true
            })
            if(!validate) return
            
            this.get_version_by_project()
            this.show_version_modal= true
        },
        get_version_by_project(){
            let select_item = this.select_item
            let data = {"select_item":select_item}
            post(version_select,data).then(response =>{
                let version_list = response.data
                this.timeline_list = version_list

            })
        },
        btn_refresh(){
            this.refresh()
        },
        // 提交修改事件
        submit_edit_version(name){
            console.log(name)
            let data = {'version':this.version_edit}
            post(version_update,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('更新成功')
                    this.show_edit_version_modal = false
                    this.refresh()
                }else {
                    alert("更新失败:",info)
                }
            })
        },


        // 编辑version事项事件
        btn_edit_version(index){
            let version =  JSON.parse(JSON.stringify(this.show_list[index]))
            this.version_edit = version
            this.show_edit_version_modal=true
        },

        // 根据项目获取服务
        get_service(project_name){
            let data = {"project_name": project_name}
            post(get_service_by_project,data).then(response=>{
                let service_list = response.data
                let content = ''
                for(let i=0; i<service_list.length; i++){
                    if(i<service_list.length-1){
                        content += service_list[i]+":"+"\n"
                    }else{
                        content += service_list[i]+":"
                    }
                }
                this.version.content = content
            })
        },

        // 获取项目列表
        get_project(){
            post(get_project_name_list).then(response=>{
                this.project_list = response.data
            })
        },
        //项目select改变 
        project_change(){
            let project_name = this.version.project
            this.get_service(project_name)
        },
        // 创建version点击事件
        btn_add_version(){
            this.get_project()
            setTimeout(() =>{
                this.show_add_version_modal = true
            },200); 
        },

        submit_add_version(name){
            console.log(name)
            let data = {'version':this.version}
            post(version_add,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('添加成功')
                    this.show_add_version_modal = false
                    this.refresh()
                }else {
                    alert("添加失败:"+info)
                }
            })
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            this.get_project()
            post(version_list).then( (response) => {
                this.total_list = response.data
                this.total = response.data.length
                if(this.total < this.pageSize) {
                    this.show_list = this.total_list
                }else {
                    let currentPage = this.$refs.page.currentPage
                    let _start = (currentPage-1) * this.pageSize
                    let _end = currentPage * this.pageSize
                    this.show_list = this.total_list.slice(_start,_end)
                }
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style>
.time{
    font-size: 16px;
    font-weight: bold;
}
.content{
    padding-left: 5px;
}
</style>